<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>用心来爱你 天然托帕石925纯银项链附鉴定证书</title>
		<link href="img/shouye/small_logo.png" rel="shortcut icon" />
		<link rel="stylesheet" type="text/css" href="css/h_goodsclassfycss/base.css" />
		<link rel="stylesheet" type="text/css" href="css/h_goodsclassfycss/h_index_css.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			.cannotChoose {
				background-color: #EFEFEF;
			}
			
			.cannotChoose a {
				color: #DEDEDE;
			}
		</style>
	</head>

	<body ontouchstart>
		<div id="spxq_main">
			<header id="h_header">
				<a href="javascript:;"><i class="iconfont h_fenlei">&#xe6d4;</i></a>
				<i class="iconfont h_fenlei">&#xe6f5;</i>
				<span class="xiahuaxian"><a href="javascript:;">商品</a></span>
				<span><a href="javascript:;">评论</a></span>
				<span><a href="javascript:;">推荐</a></span>
				<a href="#">
					<i class="iconfont h_gouwuche">&#xe6b9;</i>
				</a>
				<div class="h_header_bottom"></div>
			</header>
			<div class="spxq_mid">
				<div class="thisShangpin">
					<img id="s_img_goodsPicSrc" />
					<div class="shangpin_xq">
						<h1 id="s_goodstitle" class="shangpin_name"></h1>
						<p>
							<span class="shangpin_price">¥<i id="s_shangpin_price" ></i></span>
							<span class="fr">月销 <i id="s_goodsMouthSale"></i></span>
						</p>
						<p>
							预计<span class="fahuoDate">09月16日</span>发货
							<span class="fr">快递：包邮</span>
						</p>
						<p><span class="newGoods">新品</span></p>
					</div>
				</div>
				<div class="weui_cells weui_cells_access">
					<a class="weui_cell" href="javascript:;">
						<div class="weui_cell_bd weui_cell_primary">
							<p class="f14">规格数量选择</p>
						</div>
						<div class="weui_cell_ft"></div>
					</a>
				</div>
				<div class="goodsYuYi">
					<h1>礼物寓意</h1>
					<p id="s_goodsMoral"></p>
					<!--这份爱以“用心”出发，不管是代表“用心的爱”的托帕石，还是紧紧环绕的小钻，还是你为她专属刻上名字，还是爱心的款式，还是体面的包装……这一切无不说明你的用心。既然选定你，当然要用心来爱你！</p>-->
				</div>
				<div id="s_goodsXiangQing" class="goodsXiangQing">
					<h1>商品详情</h1>
					<!--<img src="">
					<img src="">
					<img src="">
					<img src="">
					<img src="">
					<img src="">
					<img src="">
					<img src="">
					<img src="">
					<img src="">
					<img src="">
					<img src="">
					<img src="">
					<img src="">-->
				</div>
				<div class="goodsPingLun">
					<h1>大家都在说</h1>
					<ul id="s_listComment">
						<!--<li>
							<span class="pl_touxiang">
								<img src="img/spxq/moren_tx.png" />
							</span>
							<p class="pl_name">qzuse***</p>
							<p class="pl_neirong">好评，项链很漂亮，戴起来很上档次，包装也好，棒棒哒</p>
						</li>
						<li>
							<span class="pl_touxiang">
								<img src="img/spxq/moren_tx.png" />
							</span>
							<p class="pl_name">与我***</p>
							<p class="pl_neirong">我想说这条项链太值啦~ 最喜欢的颜色就是蓝色 所以就买了个蓝色石头的项链~ 是托帕石的哦~ 有证书~ 戴着很显气质~ 买过的最喜欢的一条项链啦~</p>
						</li>
						<li>
							<span class="pl_touxiang">
								<img src="img/spxq/moren_tx.png" />
							</span>
							<p class="pl_name">♛倘***</p>
							<p class="pl_neirong">宝石很亮，是银的，特别好，和姐妹一起买的，喜欢</p>
						</li>-->
					</ul>
					<div class="button_sp_area">
						<a href="javascript:;" class="weui_btn weui_btn_plain_default">更多评论</a>
					</div>
				</div>
				<div class="goodsCaiXiang">
					<h1>你可能感兴趣</h1>
					<div class="weui-row" id="goodsCaiXiang">
						<!--			通过jQuery追加 ,9项goodsCaiXiang;			
						<div class="weui-col-50">
							<a href="javascript:;">
								<img src="img/goodsCaiXiang/sp10.jpg" class="CaiXiangImg" />
								<p class="CaiXiangName">创意七夕情人节礼盒送女朋友浪漫表白恋爱独家定制项链手链音乐盒</p>
							</a>
							<span class="CaiXiangPrice">¥199.00</span>
						</div>-->
					</div>
					<div class="button_sp_area">
						<a href="javascript:;" class="weui_btn weui_btn_plain_default">查看更多推荐</a>
					</div>
				</div>
				<div class="goodsGuangGao">
					<p class="tc GuangGao_title">—— 活动正在进行时 ——</p>
					<img src="img/spxq/goodsGuangGao.jpg" style="width: 100%;" />
				</div>
			</div>
			<footer class="spxq_foot">
				<div class="foot_left">
					<li id="love_bj">
						<a href="javascript:;">
							<i id="taoxin" class="iconfont f25">&#xe649;</i><br />
							<span id="xihuan" class="f14">喜欢</span>
						</a>
					</li>
					<li>
						<a href="javascript:;">
							<i class="iconfont f25 i_blue">&#xe6c5;</i><br />
							<span class="f14">客服</span>
						</a>

					</li>
				</div>
				<div class="foot_right">
					<input type="button" name="" id="addGwc" value="加入购物车" class="open-popup" data-target="#half_yinying" />
					<input type="button" name="" id="addBuy" value="立即购买" class="open-popup" data-target="#half_yinying" />
				</div>

			</footer>

			<div id="half_yinying" class="weui-popup-container popup-bottom weui-popup-modal-visible">
				<div class="weui-popup-overlay yinying"></div>
				<div id="h_tanchu" class="weui-popup-modal">
					<div class="toolbar">
						<div class="toolbar-inner">
							<a href="javascript:;" class="picker-button close-popup"><i class="iconfont offBtn">&#xe706;</i></a>
							<div class="catchImg">
								<img src="img/spxq/gwc_catch.jpg" />
							</div>
							<div class="tl ml30 mt10 f16">
								<p class="colR myPrice">¥<i id="s_classPrice">199.00</i></p>
								<p id="myKuanShi" class="myKuanShi">选择 款式</p>
								<p class="colR">库存紧张，仅剩<i id="s_classNumber">9</i>件</p>
							</div>
						</div>
					</div>
					<div class="h_tanchu_mid">
						<p>款式</p>
						<ul id="kuanshi_choose">
							<li>
								<a href="#" id="classs01"></a>
							</li>
							<li>
								<a href="#" id="classs02"></a>
							</li>
							<li>
								<a href="#" id="classs03"></a>
							</li>
							<li>
								<a href="#" id="classs04"></a>
							</li>
						</ul>
					</div>
					<div class="h_tanchu_foot">
						<ul>
							<li style="border: none;">数量</li>
							<li class="f15 yjl cannotChoose">
								<a href="#" class="iconfont" id="h_jianNum">&#xe6a1;</a>
							</li>
							<li><input type="text" id="myGoodsNum" value="1" /></li>
							<li class="f15 yjr">
								<a href="#" class="iconfont" id="h_addNum">&#xe600;</a>
							</li>
						</ul>
						<input type="button" id="goodsQueDing" value="确定" />
					</div>
				</div>
			</div>
		</div>

		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/goodsCaiXiangList.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="js/s_addGoodsDetail.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="js/s_addGoodsDetail_LeanCloud.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("#love_bj").click(function() {
				if($("#xihuan").html() == "喜欢") {
					$("#xihuan").html("已喜欢").addClass("add_red");
					$("#taoxin").html("&#xe648;").addClass("add_red");
				} else {
					$("#xihuan").html("喜欢").removeClass("add_red");
					$("#taoxin").html("&#xe649;").removeClass("add_red");
				}
			});
			$(function() {
				for(var i = 0; i < goodsCaiXiang.length; i++) {
					var div = $('<div class="weui-col-50"></div>');
					$("#goodsCaiXiang").append(div);
					var a = $('<a href="javascript:;"></a>');
					var price = $('<span class="CaiXiangPrice">' + goodsCaiXiang[i].price + '</span>');
					div.append(a).append(price);
					var img = $('<img src="' + goodsCaiXiang[i].src + '" class="CaiXiangImg" />');
					var p = $('<p class="CaiXiangName">' + goodsCaiXiang[i].name + '</p>');
					a.append(img).append(p);
				}
			});
			//			$("#addGwc")
			$("#goodsQueDing").click(function() {
				var img = $(".catchImg").children().attr("src");
				var name = $("title").html();
				var Style = $(".myKuanShi").html();
				var price = $(".myPrice").html();
				var goodsNum = $(this).prev().find("input").val();
				var goodsjson = {
					img: img,
					name: name,
					Style: Style,
					goodsNum: goodsNum,
					price: price,
					num: 1
				};
				if(!$("#kuanshi_choose li").hasClass("h_choose")) {
					alert("请选择商品规格");
				} else if(localStorage.goodslist) {
					var arr = JSON.parse(localStorage.goodslist);
					var cd = arr.length;
					if(cd > 0) {
						var sum = 0;
						for(var i = 0; i < cd; i++) {
							if(arr[i].goodsName == name) {
								arr[i].num = parseInt(arr[i].num) + 1;
							} else {
								sum += 1;
								if(sum == cd) {
									arr.push(goodsjson);
								}
							}
						}
					} else {
						var arr = [goodsjson];
					}
					localStorage.goodslist = JSON.stringify(arr);

				} else {
					var arr = [goodsjson];
					//把数组对象解析成json字符串
					localStorage.goodslist = JSON.stringify(arr);
				}
			});

			//			$("#kuanshi_choose li a").click(function() {
			//				
			//				var myKuanShi = $(this).get(0).innerHTML;
			//				if(!$("#kuanshi_choose li").hasClass("h_choose")) {
			//					$(this).parent().addClass("h_choose");
			//				} else {
			//					$("#kuanshi_choose li").removeClass("h_choose");
			//					$(this).parent().addClass("h_choose");
			//				}
			//				$("#myKuanShi").html(myKuanShi);
			//				console.log(class01Arr[1]);
			//				$("#s_classPrice").html()
			//			});

			var num = 1;
			$("#h_addNum").click(function() {
				//				var goodsNum = /[1-9]\d{0,}/;
				if(num < 10) {
					num++;
					$("#myGoodsNum").get(0).value = num;

				} else {
					num = num;
				}
			});
			$("#h_jianNum").click(function() {
				if(num > 1) {
					num--;
					$("#myGoodsNum").get(0).value = num;
				} else {
					num = num;
				}
			});
			$("#h_addNum").click(function() {
				if($("#myGoodsNum").get(0).value == 10) {
					$("#h_addNum").parent().addClass("cannotChoose");
				} else if($("#myGoodsNum").get(0).value == 1) {
					$("#h_jianNum").parent().addClass("cannotChoose");
				} else {
					$("#h_addNum").parent().removeClass("cannotChoose");
					$("#h_jianNum").parent().removeClass("cannotChoose");
				}
			});
			$("#h_jianNum").click(function() {
				if($("#myGoodsNum").get(0).value == 10) {
					$("#h_addNum").parent().addClass("cannotChoose");
				} else if($("#myGoodsNum").get(0).value == 1) {
					$("#h_jianNum").parent().addClass("cannotChoose");
				} else {
					$("#h_addNum").parent().removeClass("cannotChoose");
					$("#h_jianNum").parent().removeClass("cannotChoose");
				}
			});

			$("#myGoodsNum").keydown(function() {
				var goodsNum = /^([1-9]|10)$/;
				if(goodsNum.test($("#myGoodsNum").get(0).value) == false) {
					alert("请输入正确的数量");
				}
			});
		</script>
	</body>

</html>